<template>
	<view class="wrap">
		<view class="search">
			<image src="../../static/search.png"></image>
			<input type="text" placeholder="搜索班级" @input="debounce('getRole',1000)" v-model="className" />
		</view>
		<view v-if="isInit" v-cloak>
			<view class="menu">
				<view class="borderBottom column" v-for="(item, index) in menuInfo.list" :key="index" :class="menuInfo.base.class">
					<view :class="item.chooseKey?'chooseActive':'choose'" @click="chooseItem(index,item.data.classCode)" v-if="!options.singleChoice">&#10004</view>
					<navigator :url="item.url" :class="item.class">
						<text v-text="item[ele]" v-for="(ele, index) in menuInfo.base.menuProp" :key="index"></text>
						<icon class="iconfont iconarrow-right-copy-copy next"></icon>
					</navigator>
				</view>
			</view>
		</view>
		<button class="submitButtonActive" @click="resultApply" v-if="!options.singleChoice">确定</button>
	</view>
</template>

<script>
import { mapActions } from 'vuex'
export default {
	data() {
		return {
			className: '',
			isInit: false,
			menuInfo: {
				base: {
					menuProp: ['name']
				},
				list: []
			},
			timeout:null
		};
	},
	onLoad() {
		this.getRole();
	},
	methods: {
		//搜索防抖
		 debounce(func, wait) {
		        let context = this
		        if (this.timeout) clearTimeout(this.timeout)
		        this.timeout = setTimeout(() => {
		            context[func]()
		        }, wait)
		},
		// 获取角色分类列表
		async getRole() {
			let arr = this.$store.state.treeChooseStatus.map(item => {
				return item.id
			})
			let resp = await this.$http.get({
				url: `/stu/addressList/classList?className=${this.className}`
			});
			this.menuInfo.list = resp.result.map(item => {
				
				if (arr.indexOf(item.id) < 0) {
					return {
						id:item.id,
						name: item.name,
						url:`roleClassifyList?id=${item.id}`,
						chooseKey:false,
						data:item
					}
				} else {
					return {
						id:item.id,
						name: item.name,
						url:`roleClassifyList?id=${item.id}`,
						chooseKey:true,
						data:item
					}
				}
				
				
			});
			this.isInit = true;
		},
		//选中或者取消选中
		async chooseItem(index,id){
			this.menuInfo.list[index].chooseKey = !this.menuInfo.list[index].chooseKey
			this.changeTreeChooseStatus(this.menuInfo.list[index])
			
			
			let resp = await this.$http.post({
				url: `/stu/addressList/studentCommonPage`,
				data:{classCode: id}
			});
			resp.result.rows.forEach(ele=>{
				if(this.menuInfo.list[index].chooseKey){
					this.idsObjIncrease(ele)
					}else{
					this.idsObjDecrease(ele)
					}
			})
		},
		...mapActions([
			'idsObjIncrease',
			'idsObjDecrease',
			'changeTree'
		]),
		resultApply(){
			uni.navigateBack({
				delta: 2, // 回退前 delta(默认为1) 页面 
			})
		}
	},
	components: {
	},
	computed:{
		
	}
};
</script>

<style lang="scss" scoped>
.search {
	width: 650upx;
	margin:0 auto 20upx auto;
	border: 1upx solid #ddd;
	height: 60upx;
	border-radius: 30upx;
	position: relative;
	image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 5upx;
		left: 10upx;
	}
	input {
		width: 590upx;
		height: 50upx;
		position: absolute;
		left: 60upx;
		top: 5upx;
		color: #999;
		font-size: 28upx;
	}
	.input-placeholder {
		color: #999;
		font-size: 28upx;
	}
}

.menu {
	padding: 0 50upx 120upx 50upx;
	.column{
		display: flex;
		align-items: center;
		.choose {
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			background: #fff;
			margin: 0 10upx;
			font-size: 0;
			border: 1upx solid #ccc;
		}
		.chooseActive{
			width: 30upx;
			height: 30upx;
			border-radius: 50%;
			font-size: 22upx;
			background: #3ED392;
			color: #fff;
			margin: 0 10upx;
			line-height: 30upx;
			text-align: center;
		}
		
	}
	navigator {
		flex:0 1 100%;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tit {
		display: flex;
		justify-content: space-between;
		text {
			font-size: 28upx;
			line-height: 100upx;
			font-weight: 600;
		}
	}
	.next {
		margin-left: auto;
		float: right;
	}
}

page{
	min-height: 100%;
	.wrap{
		min-height: 100%;
		padding-top: 20upx;
	}
	.submitButtonActive{
		position: fixed;
		bottom: 20upx;
		left:50%;
		transform: translateX(-50%);
	}
}
</style>
